<template>
  {{ activeIndex }}
  <van-tree-select
    v-model:main-active-index="activeIndex"
    height="55vw"
    :items="items"
  >
    <template #content>
      <div v-if="activeIndex === 0">
        <PDF></PDF>
      </div>
      <div v-if="activeIndex === 1">
        <FormVerify></FormVerify>
      </div>
      <div v-if="activeIndex === 2">
        <Mitt></Mitt>
      </div>
      <div v-if="activeIndex === 3">
        <DatePicker></DatePicker>
      </div>
      <div v-if="activeIndex === 4">
        <DatePickerChange></DatePickerChange>
      </div>
      <div v-if="activeIndex === 5">
        <FuzzySearch></FuzzySearch>
      </div>
      <div v-if="activeIndex === 6">
        <AlertTip></AlertTip>
      </div>
      <div v-if="activeIndex === 7">
        <MergeCell></MergeCell>
      </div>
      <div v-if="activeIndex === 8">
        <FatherToSon></FatherToSon>
      </div>
      <div v-if="activeIndex === 9">
        <UseGasp></UseGasp>
      </div>
      <div v-if="activeIndex === 10">
        <CustomInput></CustomInput>
      </div>
      <div v-if="activeIndex === 11">
        <TransmissionRef></TransmissionRef>
      </div>
    </template>
  </van-tree-select>
</template>

<script setup>
import PDF from "@/views/components/PDF";
import FormVerify from "@/views/components/FormVerify";
import Mitt from "@/views/components/Mitt";
import DatePicker from "@/views/components/DatePicker";
import DatePickerChange from "@/views/components/DatePickerChange";
import FuzzySearch from "@/views/components/FuzzySearch";
import AlertTip from "@/views/components/AlertTip";
import MergeCell from "@/views/components/MergeCell";
import FatherToSon from "@/views/components/FatherToSon";
import UseGasp from "@/views/components/UseGasp";
import CustomInput from "@/views/components/CustomInput";
import TransmissionRef from "@/views/components/TransmissionRef";

import { ref } from "vue";
const activeIndex = ref("");
const items = [
  { text: "pdf预览" },
  { text: "表单校验" },
  { text: "vue3mitt的使用" },
  { text: "日期组件最多选择半年" },
  { text: "显示的是当天日期传的是下一天的00:00:00" },
  { text: "模糊搜索" },
  { text: "alert提示" },
  { text: "合并单元格" },
  { text: "父传子，子渲染的一些问题" },
  { text: "gasp动画库的使用" },
  { text: "自定义v-model" },
  { text: "通讯通过ref" },
];
</script>
<style scoped lang="scss">
.link {
  color: skyblue;
  cursor: pointer;
}
</style>
